<template>
	<view class="content">
			<view class="section-1">
				<view class="section-body">
					<view class="list" v-if="list.length > 0">
						<view class="item" v-for="(item, index) in list">
							<view class="name">
								<view class="tiem">
									<view class="action">时间：</view>
									<view class="description"><text>{{ item.design_time? item.design_time.substring(0, 10) : '-' }}</text><text>{{ item.period }}</text><text>{{ item.type }}</text><text><view @click="showAction(item)" class="iconfont icon-caidan"></view></text></view>
								</view>
								<view class="describe">描述：</view>
								<view class="text"><u--textarea v-model="item.describe" disabled class="text2" ></u--textarea></view>
								<view class="describe" v-show="item.file_path">照片：</view>
								<view class="imgs"v-show="item.file_path">
									<img :src='item.file_path' alt="">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-action-sheet :actions="StageList" :title="name" :show="show"  @select="selectClick" @close="show = false" :closeOnClickOverlay="true"></u-action-sheet>
	</view>
</template>

<script>
import { PeojectDesignProblemIndex,PeojectDesignProblemDel } from '@/api/outage.js'
import { mapGetters, mapActions } from 'vuex'
export default {
	data() {
		return {
			show:false,
			list: [
			],
			id:'',
			StageList:[
					{
						name:'修改'
					},
					{
						name:'删除'
					}
			]
		}
	},
	computed: {
		...mapGetters({
			curProject: 'system/getCurProject'
		})
	},
	methods: {
		showAction(res){
			this.show=true
			this.id=res.id
		},
		selectClick(e){
			this.show=false
			if(e.name=='修改'){
				uni.navigateTo({
					url: '/pages/work/manager/construction/safety/design/info/add?id=' + this.id
				})
			}else{
				PeojectDesignProblemDel({id:this.id}).then(res=>{
					if(res.data.code==1){
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							duration: 1000
						})
						this.upCallback()
					}else{
						uni.showToast({
							title: '删除失败',
							icon: 'error',
							duration: 1000
						})
					}
				})
				
			}
		},
		upCallback(){
			PeojectDesignProblemIndex({project_id: this.curProject.id}).then(res=>{
				this.list=res.data.data.data
			})
		},
	},
	onShow() {
		this.upCallback()
	},
	onNavigationBarButtonTap(res) {
		uni.navigateTo({
			url: '/pages/work/manager/construction/safety/design/info/add'
		})
	}
}
</script>

<style lang="scss" scoped>
.section-1 {
	width: 100%;
	background-color: #2e5efe;
	.section-body {
		background-color: #fff;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
	}
	.list {
		width: 670rpx;
		box-sizing: border-box;
		margin-left: 40rpx;
		margin-bottom: 50rpx;
		padding-top: 1rpx;
		.item {
			width: 100%;
			font-size: 26rpx;
			// margin-top: 40rpx;
				.name {
					margin-top: 40rpx;
					border-radius: 40rpx;
					padding: 30rpx;
					webkit-box-shadow:0px 0px 10px #cccccc;
					moz-box-shadow:0px 0px 10px #cccccc;
					box-shadow: 0px 0px 10px #cccccc;
					.tiem {
						display: flex;
						margin-bottom: 20rpx
						;
						.action{
							width: 90rpx;
						}
						.description{
							width: 550rpx;
							display: flex;
							justify-content: space-between;
						}
					}
				.describe{
					margin-bottom: 20rpx;
				}
				.text{
					.text2{
						height: 140rpx;
						border-radius: 20rpx;
						background-color:#EFEFEF ;
					}
					margin-bottom: 20rpx;
				}
				.imgs{
					width: 200rpx;
					height: 200rpx;
					border-radius: 30rpx;
					overflow: hidden;
					img{
						width: 200rpx;
						height: 200rpx;
					}
				}
			}
		}
	}
}
</style>
